<template>
  <div class="user-info-container">
    <!-- 用户信息卡片 -->
    <div class="profile-card">
      <div class="profile-header">
        <div class="avatar">
          <img src="" alt="用户头像">
        </div>
        <div class="profile-header-info">
          <div class="username">{{userInfo.userName}}</div>
          <div class="stats">
            <!-- 文章统计 -->
            <div class="stat-item">
              <div class="stat-number">{{userInfo.totalArticles}}</div>
              <div>文章</div>
            </div>
            <!-- 粉丝统计 -->
            <div class="stat-item interactive" @click="openModal('fans')">
              <div class="stat-number">{{userInfo.totalFans}}</div>
              <div>粉丝</div>
            </div>
            <!-- 关注统计 -->
            <div class="stat-item interactive" @click="openModal('following')">
              <div class="stat-number">{{userInfo.totalFollow}}</div>
              <div>关注</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 关系弹窗 -->
    <div v-if="showModal" class="modal-wrapper">
      <div class="overlay" @click="closeModal"></div>
      <div class="modal">
        <div class="modal-header">
          <div class="modal-title">{{ activeTab === 'fans' ? '粉丝列表' : '关注列表' }}</div>
          <div class="close-btn" @click="closeModal">×</div>
        </div>
        
        <div class="tabs">
          <div 
            class="tab" 
            :class="{ active: activeTab === 'fans' }" 
            @click="switchTab('fans')"
          >
            粉丝 ({{ fans.length }})
          </div>
          <div 
            class="tab" 
            :class="{ active: activeTab === 'following' }" 
            @click="switchTab('following')"
          >
            关注 ({{ followings.length }})
          </div>
        </div>
        
        <div class="modal-content">
          <!-- 粉丝内容 -->
          <div v-show="activeTab === 'fans'" class="tab-content">
            <div 
              v-for="(fan, index) in fans" 
              :key="'fan-'+index"
              class="account-item"
            >
              <div class="account-avatar">
                <img :src="fan.userPic" :alt="fan.userName">
              </div>
              <div class="account-info">
                <div class="account-name">{{ fan.userName }}</div>
              </div>
              <button 
                class="follow-btn" 
                :class="{ follow: !fan.followed, followed: fan.followed }"
                @click="toggleFollow(fan, 'fans')"
              >
                {{ fan.followed ? '已回关' : '回关' }}
              </button>
            </div>
            <div class="modal-footer">
              {{ fans.length ? '已显示全部粉丝' : '暂无粉丝' }}
            </div>
          </div>
          
          <!-- 关注内容 -->
          <div v-show="activeTab === 'following'" class="tab-content">
            <div 
              v-for="(following, index) in followings" 
              :key="'following-'+index"
              class="account-item"
            >
              <div class="account-avatar">
                <img :src="following.userPic" :alt="following.userName">
              </div>
              <div class="account-info">
                <div class="account-name">{{ following.userName }}</div>
              </div>
              <button 
                class="follow-btn" 
                :class="{ follow: !following.followed, followed: following.followed }"
                @click="toggleFollow(following, 'following')"
              >
                {{ following.followed ? '已关注' : '关注' }}
              </button>
            </div>
            <div class="modal-footer">
              {{ followings.length ? '已显示全部关注' : '暂无关注' }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'UserInfo',
  data() {
    return {
      userInfo: {
        userName: "敏锐小红花Qq",
        totalArticles: 6,
        totalFans: 7,
        totalFollow: 13
      },
      showModal: false,
      activeTab: 'fans',
      fans: [
        {
          userName: '科技爱好者',
          userPic: '',
          followed: false
        },
        {
          userName: '旅行达人',
          userPic: '',
          followed: true
        }
      ],
      followings: [
        {
          userName: '闽南网',
          userPic: ' IDI0IDI0IiBmaWxsPSIjNGNhZjUwIiBzdHJva2U9IiMzYjhkNDAiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNMjAgMjF2LTJhNCA0IDAgMCAwLTQtNEg4YTQgNCAwIDAgMC00IDR2MiIvPjxjaXJjbGUgY3g9IjEyIiBjeT0iNyIgcj0iNCIvPjwvc3ZnPg==',
          followed: true
        },
        {
          userName: '每日经济新闻',
          userPic: '',
          followed: true
        }
      ]
    }
  },
  methods: {
    openModal(defaultTab) {
      this.showModal = true
      this.activeTab = defaultTab
      if (defaultTab == 'fans') {
        this.getFans()
      }
      if (defaultTab == 'following') {
        this.getFollows()
      }
    },
    closeModal() {
      this.showModal = false
    },
    switchTab(tabName) {
      this.activeTab = tabName
      if (tabName == 'fans') {
        this.getFans()
      }
      if (tabName == 'following') {
        this.getFollows()
      }
    },
    toggleFollow(user, fanOrFollow) {
      user.followed = !user.followed
      if (fanOrFollow == 'fans') {
        if (user.followed) {
          this.$api.serviceNews.post('api/news/follow', 
          {"userName": user.userName, "userAccount": this.$store.state.user.userAccount}, {
            headers: {
              'Content-Type': 'application/json'
            }
          })
          .then(response => {
            if (response.data.code == 200){
            }
          })
          .catch(error => {
            console.error('失败', error);
          });
        } else {
          this.$api.serviceNews.post('api/news/cancelFollow', 
          {"userName": user.userName, "userAccount": this.$store.state.user.userAccount}, {
            headers: {
              'Content-Type': 'application/json'
            }
          })
          .then(response => {
            if (response.data.code == 200){
            }
          })
          .catch(error => {
            console.error('失败', error);
          });
        }
      }
      if (fanOrFollow == 'following') {
        if (user.followed) {
          this.$api.serviceNews.post('api/news/follow', 
          {"userName": user.userName, "userAccount": this.$store.state.user.userAccount}, {
            headers: {
              'Content-Type': 'application/json'
            }
          })
          .then(response => {
            if (response.data.code == 200){
            }
          })
          .catch(error => {
            console.error('失败', error);
          });
        } else {
          this.$api.serviceNews.post('api/news/cancelFollow', 
          {"userName": user.userName, "userAccount": this.$store.state.user.userAccount}, {
            headers: {
              'Content-Type': 'application/json'
            }
          })
          .then(response => {
            if (response.data.code == 200){
            }
          })
          .catch(error => {
            console.error('失败', error);
          });
        }
      }
    },
    getUserInfo(){
      this.$api.serviceUser.post('api/user/userInfo', 
      {"userAccount": this.$store.state.user.userAccount}, {
        headers: {
          'Content-Type': 'application/json'
        }
      })
      .then(response => {
        if (response.data.code == 200){
          this.userInfo = response.data.data
        }
      })
      .catch(error => {
        console.error('失败', error);
      });
    },
    getFans(){
      this.$api.serviceUser.post('api/user/fans', 
      {"userAccount": this.$store.state.user.userAccount}, {
        headers: {
          'Content-Type': 'application/json'
        }
      })
      .then(response => {
        if (response.data.code == 200){
          console.log(response.data.data);
          this.fans = response.data.data
        }
      })
      .catch(error => {
        console.error('失败', error);
      });
    },
    getFollows(){
      this.$api.serviceUser.post('api/user/follows', 
      {"userAccount": this.$store.state.user.userAccount}, {
        headers: {
          'Content-Type': 'application/json'
        }
      })
      .then(response => {
        if (response.data.code == 200){
          console.log(response.data.data);
          this.followings = response.data.data
        }
      })
      .catch(error => {
        console.error('失败', error);
      });
    }
  },
  mounted() {
    document.addEventListener('keydown', (event) => {
      if(event.key === 'Escape') {
        this.closeModal()
      }
    })
    this.getUserInfo()
  }
}
</script>

<style scoped>
.user-info-container {
  font-family: 'Arial', sans-serif;
  background-color: #f5f5f5;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 30px;
  color: #333;
}

.profile-card {
  background-color: white;
  border-radius: 12px;
  width: 1150px;
}

.profile-header {
  display: flex;
  align-items: center;
}

.avatar {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  margin-right: 30px;
  margin-left: 15px;
  overflow: hidden;
  flex-shrink: 0;
  border: 4px solid #f0f0f0;
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-header-info {
  flex: 1;
  margin-left: 30px;
}

.username {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 20px;
}

.stats {
  display: flex;
  gap: 30px;
}

.stat-item {
  text-align: center;
  font-size: 16px;
  cursor: default;
}

.stat-item.interactive {
  cursor: pointer;
}

.stat-item.interactive:hover {
  opacity: 0.8;
}

.stat-number {
  font-weight: bold;
  font-size: 20px;
  margin-bottom: 5px;
}

/* 弹窗样式 */
.modal-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: flex-end;
  z-index: 1000;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}

.modal {
  position: relative;
  width: 400px;
  height: 100%;
  background-color: white;
  box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  border-bottom: 1px solid #eee;
}

.tabs {
  display: flex;
  border-bottom: 1px solid #eee;
}

.tab {
  flex: 1;
  text-align: center;
  padding: 15px 0;
  cursor: pointer;
  position: relative;
}

.tab.active {
  font-weight: bold;
}

.tab.active:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #ff4d4f;
}

.modal-title {
  font-size: 18px;
  font-weight: bold;
}

.close-btn {
  font-size: 24px;
  cursor: pointer;
  color: #999;
  line-height: 1;
}

.close-btn:hover {
  color: #333;
}

.modal-content {
  flex: 1;
  overflow-y: auto;
  padding: 15px;
}

.account-item {
  display: flex;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #f5f5f5;
}

.account-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-right: 15px;
  overflow: hidden;
}

.account-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.account-info {
  flex: 1;
}

.account-name {
  font-weight: bold;
}

.follow-btn {
  padding: 6px 16px;
  border-radius: 15px;
  font-size: 12px;
  cursor: pointer;
  border: none;
  width: 70px;
  transition: all 0.2s;
}

.follow-btn.follow {
  background-color: #ff4d4f;
  color: white;
}

.follow-btn.followed {
  background-color: #f0f0f0;
  color: #666;
}

.modal-footer {
  text-align: center;
  padding: 15px;
  color: #999;
  font-size: 12px;
}
</style>